<template>
  <div class="upload-info">
    <el-row >
      <el-col :span="6">
        <span>选择分类</span>
        <el-select v-model="title" @change="selectCategory" placeholder="请选择" >
          <el-option
            v-for="item in categorys"
            :key="item.id"
            :label="item.title"
            :value="item.id">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="7">
        <span>现有榜单</span>
        <el-select
          v-model="boardName"
          filterable
          clearable
          @clear="clearBoard"
          @change="selectBoard"
          placeholder="请选择"
        >
          <el-option
            v-for="item in boards"
            :key="item.id"
            :label="item.title"
            :value="item.id"
          >

          </el-option>
        </el-select>
      </el-col>
      <el-col :span="2" :offset="6">
        <el-button type="primary" @click="addDetail" >
          新增详情
        </el-button>
      </el-col>
    </el-row>
    <el-row>

      <el-col
        :span="5"
        v-for="detail in details"
        :key="detail.id"
        style="margin-left: 10px"
      >
        <el-card :body-style="{ padding: '5px', height:'220px'}" shadow="hover" style="height: 240px; margin-bottom: 15px;">
          <div style="padding: 0px;height: 120px">
            <el-row type="flex" align="middle" style="margin: 5px">
              <el-col class="title">{{detail.title}}</el-col>
            </el-row>
            <img :src="getImgUrl(detail.images)" class="image">
          </div>
          <div style="height: 40px;background-color: red;">
            <el-button type="text" @click="del(detail)" class="button">删除</el-button>
            <el-button type="text" @click="edit(detail)" class="button">编辑</el-button>
          </div>
        </el-card>
      </el-col>


    </el-row>



  </div>
</template>

<script>
  import ImageUpload from './Common/ImageUpload'

  export default {
    name: 'BoardDetail',
    data() {
      return {
        categoryId:0,
        title:'全部',
        boardName:'',
        categorys:[{
          title:'全部'
        }],
        boards:[],
        loading: false,
        uploadPicUrl: "", //提交到后台图片地址
        urlList:[],
        introduce:'',
        inputTitle:'',
        boardId:0,
        details:[]
      };
    },
    components:{
      ImageUpload
    },
    mounted() {
      this.loadCategory()
    },
    methods: {

      selectCategory(val){
        this.categoryId = val
        this.loadBoards()
        this.boardId = 0
        this.boardName = ''
      },
      clearBoard(){
        this.boardName = ''
        this.boardId = 0
        this.details.removeAll()
      },
      selectBoard(val) {
        this.boardId = val
        this.loadBoardDetail()
      },
      addDetail(){
        this.$router.push({
          name:'addDetail',
          query:{
            boardId:this.boardId
          }
        })
      },
      del(detail){
        return this.$confirm("是否确定删除此详情？").then(() => {

          this.getAxios('boardDetail/delete',{
            id:detail.id
          }).then(res => {
            this.$message({
              type:'success',
              message:'删除成功'
            });
            this.details.rmove(detail)
          }).catch(error => {
            this.$message({
              type:'info',
              message:error.msg
            });
          })
        }).catch(error =>{

        })
      },
      edit(detail){
        this.$router.push({
          name:'addDetail',
          query:{
            detailId:detail.id,
            boardId:this.boardId
          }
        })

      },

      getImgUrl(urls){
        var result=urls.split(",");
        if (result.length > 0){
          return result[0]+'?imageView2/1/w/400/h/300'
        }
        return ''

      },

      loadCategory(){
        this.getAxios('boardCategory/pageList').then(res => {
          this.categorys = this.categorys.concat(res.data)
          let category = this.categorys[0]
          this.categoryId = category.id
          this.loadBoards()
        }).catch( error => {
          this.$message({
            type:'info',
            message:error.msg
          })
        })
      },
      loadBoards(){
        this.getAxios('billboard/pageList',{
          categoryId:this.categoryId
        }).then(res => {
          this.boards = res.data
          if (this.boards.length > 0){
            let board = this.boards[0]
            this.boardName = board.title
            this.boardId = board.id
            this.loadBoardDetail()
          } else {
            this.boardName = ''
            this.boardId = 0
            this.details.removeAll()
          }
        }).catch(error => {
          this.$message({
            type:'info',
            message:error.msg
          })
        })
      },
      loadBoardDetail(){
        this.getAxios('boardDetail/pageList',{
          id:this.boardId
        }).then(res => {
          this.details = res.data.list
        }).catch(error => {

        })
      }
    }
  };
</script>

<style>
  .title{
    margin-top: 0px;
    margin-bottom: 0px;
  }
  .image {
    width: 100%;
    margin-top: 0px;
    margin-bottom: 0px;
    display: block;
  }
  .el-row {
    margin-bottom: 20px;
  &:last-child {
     margin-bottom: 0;
   }
  }
</style>
